<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background: #00334b;
            color: #fff;
        }
        .box{
            max-width: 900px;
            margin:auto;
        }
        .box > h1 {
            text-align: center;
            margin: 80px 0 30px 0px;
            font-size: 40px;
            color: #fff;
            font-weight: normal;
        }
        .add-task {
            overflow: hidden;
            width: 82%;
            margin: auto;
        }
        .add-task input[type=text] {
            float: left;
            width: 80%;
            margin-right: 1%;
            display: block;
            background: #ddd;
            border: none;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
            padding: 10px;
            border-radius: 3px;
        }
        .add-task button {
            float: left;
            background: #46b1e4;
            border: none;
            cursor: pointer;
            color: #333;
            width: 120px;
            padding: 10px;
            border-radius: 3px;
        }
        ul {
            padding: 0px;
            list-style: none;
        }
        .box .task-item {
            background: #fff;
            color: #333;
            margin-bottom: 2px;
            cursor: pointer;
            padding: 10px;
            border-radius: 3px;
            width: 80%;
            margin: 3px auto;
        }
        .box .task-item .fr{
            float: right;
        }
        .shade {
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: rgba(30, 30, 30, .6);
            display: none;
        }
        .details {
            background: #fff;
            overflow: auto;
            color: #333;
            width: 300px;
            height: 322px;
            padding: 10px;
            bottom: 20%;
            right: 0px;
            border-radius: 3px 0 0 3px;
            box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .1);
            position: absolute;
            /* display: none; */
        }
        form {
            display: block;
            margin-top: 0em;
        }
        .details .content {
            font-weight: 900;
            cursor: pointer;
        }
        .details .item {
            margin-bottom: 20px;
        }
        .details .remind {
            margin-bottom: 20px;
        }
        label {
            cursor: default;
        }
        textarea {
            min-height: 100px;
            border: none;
            resize: none;
        }
        textarea, input[type=text], input[type=date] {
            width: 100%;
            display: block;
            background: #ddd;
            -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
            -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
        }
        .details .date {
            height: 40px;
        }
        .details .remind {
            margin-bottom: 20px;
        }
        .details button {
            float: left;
            background: #46b1e4;
            border: none;
            cursor: pointer;
            color: #333;
            width: 106px;
            padding: 10px;
            border-radius: 3px;
        }
        .details .colse {
            font-family: "微软雅黑";
            font-size: 20px;
            color: #000;
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box">
    <h1>我的Todo</h1>
    <form class="add-task">
        <input type="text" placeholder="请输入">
        <button type="submit">提交</button>
    </form>
    <ul class="task-list">
        <li class="task-item">
            <input type="radio" class="complete">
            <span class="task-content">今晚开车</span>
            <div class="fr">
                <span class="delete">删除</span>
                <span class="detail">详细</span>
            </div>
        </li>
        <li class="task-item">
            <input type="radio" class="complete">
            <span class="task-content">明早跑步</span>
            <div class="fr">
                <span class="delete">删除</span>
                <span class="detail">详细</span>
            </div>
        </li>
    </ul>
    <div class="shade"></div>
    <div class="details">
        <form>
            <h2 class="content">这是标题</h2>
            <div class="item">
                <textarea></textarea>
            </div>
            <div class="remind">
                <label>提醒时间</label>
                <input type="date" class="date">
            </div>
            <div class="update">
                <button>更新</button>
            </div>
            <div class="colse">X</div>
        </form>
    </div>

</div>

</body>
</html>